<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="robots" content="all">
    <meta name="referrer" content="always">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="applicable-device" content="pc,mobile" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="keywords" content="html在线转义,html转码工具,在线转义工具">
    <meta name="description" content="提供HTML代码转义输出、也可将转义过的HTML代码还原为原始代码">
    <title>HTML转义/反转义 iP138在线工具</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../style/responsive.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../style/page.css" />
    <script type="text/javascript" src="../jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <div class="content">
                <div class="mod-panel">
                    <div class="banner-outer"></div>
                    <div class="hd">
                        <h1>HTML转义 / 反转义</h1>
                    </div>
                    <div class="bd">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-horizontal">
                                    <div class="form-group clearfix">
                                        <label class="col-md-2 control-label">请在输入框粘贴需转换的HTML代码：</label>
                                        <div class="col-md-8">
                                            <textarea id="html-content" class="form-control"
                                                style="height:180px;"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <div class="col-md-8 col-md-offset-2">
                                            <button id="html-escape" class="btn btn-primary"
                                                type="button">HTML转义</button>
                                            <button id="html-unescape" class="btn btn-primary"
                                                type="button">HTML反转义</button>
                                            <button id="example" class="btn btn-primary" type="button">案例demo</button>
                                            <button id="copy" class="btn btn-success" type="button">复制</button>
                                            <button id="clear" class="btn btn-danger" type="button">清空</button>
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label class="col-md-2 control-label">结果：</label>
                                        <div class="col-md-8">
                                            <textarea id="result-content" class="form-control"
                                                style="height:180px;"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-10">
                                <div class="tips">
                                    <h4>工具说明</h4>
                                    <p>HTML转义工具提供HTML代码转义输，也可将转义过的HTML代码还原为原始代码。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                (function () {
                    const htmlCon = document.querySelector('#html-content');
                    const resCon = document.querySelector('#result-content');
                    const escapeBtn = document.querySelector('#html-escape');
                    const unescapeBtn = document.querySelector('#html-unescape');
                    const example = document.querySelector('#example');
                    const copyBtn = document.querySelector('#copy');
                    const clearBtn = document.querySelector('#clear');
                    escapeBtn.addEventListener('click', () => {
                        resCon.value = escapeHtml(htmlCon.value);
                    }, false);
                    unescapeBtn.addEventListener('click', () => {
                        resCon.value = unescapeHtml(htmlCon.value);
                    }, false);
                    example.addEventListener('click', () => {
                        htmlCon.value = `<p class="tool_html">请在输入框内贴入你需要转换的HTML代码</p>
<p>HTML转换工具，可以将HTML代码转换为HTML转义字符串</p>
<p>直接将你所要用程序输出的大串HTML代码贴到输入框中，即可一键生成</p> `;
                    }, false);
                    copyBtn.addEventListener('click', () => {
                        if (resCon.value == '') {
                            alert('暂无内容，无法复制！');
                            return false;
                        }
                        resCon.select();
                        document.execCommand('copy');
                        alert('复制成功！');
                    }, false);
                    clearBtn.addEventListener('click', () => {
                        htmlCon.value = '';
                    }, false);
                    function unescapeHtml(str) {
                        if (Object.prototype.toString.call(str) !== '[object String]') {
                            return false;
                        }
                        let arrEntities = {
                            'lt': '<',
                            'gt': '>',
                            'nbsp': ' ',
                            'amp': '&',
                            'quot': '"'
                        };
                        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, (all, t) => {
                            return arrEntities[t];
                        });
                    }
                    function escapeHtml(str) {
                        if (Object.prototype.toString.call(str) !== '[object String]') {
                            return false;
                        }
                        return str.replace(/[<>&"]/g, (c) => {
                            return {
                                '<': '&lt;',
                                '>': '&gt;',
                                '&': '&amp;',
                                '"': '&quot;'
                            }[c];
                        });
                    }
                })();
            </script>
        </div>
</body>

</html>